<script lang="ts" setup>
import { usePageStore } from "@/store";
// import { getPage } from "../../api";
import { defineEmits, defineProps } from "vue";
const pageStore = usePageStore();
const page = ref<{
  pageSize: number;
  pageCount: number;
  total: number;
  currentPage: number;
}>({
  pageCount: 1,
  pageSize: pageStore.page.pageSize ?? 10,
  total: pageStore.page.total ?? 100,
  currentPage: pageStore.page.currentPage ?? 0,
});
watch(
  () => pageStore.page.total,
  (newValue) => {
    page.value.total = newValue;
  },
  {
    flush: "post",
  },
);
const emits = defineEmits<{ (e: "current", page: number): void }>();
const changeCurrent = () => {
  emits("current", page.value.currentPage);
};
</script>
<template>
  <el-pagination
    v-model:current-page="page.currentPage"
    @update:current-page="changeCurrent"
    :page-size="page.pageSize"
    @update:page-size="() => {}"
    layout="prev, pager, next"
    :total="page.total"
  />
</template>
<style lang="scss" scoped>
.el-pagination {
  justify-content: center;
}
</style>
